<template>
  <el-form :model="form" label-width="auto" style="max-width: 600px" :disabled="viewState == 'view'">
    <el-form-item label="供应商名称">
      <el-input v-model="form.supName" placeholder="请输入供应商名称" />
    </el-form-item>
    <el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input v-model="form.phone" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱">
            <el-input v-model="form.email" placeholder="请输入电子邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item label="主要联系人">
      <el-input v-model="form.primaryPerson" placeholder="请输入主要联系人" />
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="form.address" placeholder="请输入地址" />
    </el-form-item>
    <el-form-item label="客户状态">
      <el-radio-group v-model="form.state">
        <el-radio value="0">预备</el-radio>
        <el-radio value="1">启用</el-radio>
        <el-radio value="2">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交表单</el-button>
      <el-button @click="resetForm">重置表单</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { ElMessage, spaceItemProps } from 'element-plus';
import { getEditSupplierInfo ,insertSupplierInfo,updateSupplierInfo} from './supplier.js';
const form = ref({
    id : 'Supplier003',
    supName : '',
    state : '',
    primaryPerson : '',
    phone : '',
    email : '',
    address : '',
    createTime : '',
    updateTime : '',
    isDelete : '',
    createUser : ''
});


//接收状态值
const route = useRoute();
const viewState = ref('');
const editData = ref({
  id: ''
});

onMounted(async () => {

  if (route.query.viewState) {
        editData.value = {
    id: route.query.id ? String(route.query.id) : ''
  };
      viewState.value = route.query.viewState;
            if(viewState.value == 'update'){
  const response = await getEditSupplierInfo(editData.value.id);
  console.log('获取到的客户信息:', response.data);
  Object.assign(form.value, response.data);
      }else if(viewState.value == 'view'){
          const response = await getEditSupplierInfo(editData.value.id);
  console.log('获取到的客户信息:', response.data);
  Object.assign(form.value, response.data);
      }
    }
  console.log(viewState.value); 
});

// 重置表单
const resetForm = () => {
  const emptyForm = {
    id : '',
    supName : '',
    state : '',
    primaryPerson : '',
    phone : '',
    email : '',
    address : '',
    createTime : '',
    updateTime : '',
    isDelete : '',
    createUser : ''
  };
  form.value = { ...emptyForm };
  ElMessage.info('表单已重置');
  console.log('重置');
};


//提交表单
const onSubmit = async () => {
    //请求后端新增接口
    if (viewState.value == 'create'){
      console.log(viewState);

      const response = await insertSupplierInfo(form.value);
    
    if (response.data) {
      ElMessage.success('客户信息更新成功');
      console.log('更新后的数据:', response.data);
      
      const newData = await getEditSupplierInfo(form.value.id);
      form.value = newData.data;
    } else {
      ElMessage.error(response.message || '更新失败');
    }
      
    //请求后端修改接口
    }else if(viewState.value == 'update'){
    const response = await updateSupplierInfo(form.value);
    console.log(response)
    if (response.data) {
      ElMessage.success('客户信息更新成功');
      console.log('更新后的数据:', response.data);
      
      const newData = await getEditSupplierInfo(form.value.id);
      form.value = newData.data;
      //originalFormData.value = JSON.parse(JSON.stringify(newData.data));
    } else {
      ElMessage.error(response.message || '更新失败');
    }
    }

};

</script>


<style scoped>

</style>